{"componentChunkName":"component---src-templates-blog-post-js","path":"/html/til210406/","result":{"data":{"site":{"siteMetadata":{"title":"Tory","author":"[Tory]","siteUrl":"https://gatsby-starter-bee.netlify.com","comment":{"disqusShortName":"","utterances":"JaeYeopHan/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"c8962796-7ab3-568f-8065-cf02a87b8265","excerpt":"Today I learned 오늘은 max-width 속성에 대해 알아보았다.\nmax-width 속성은 inline, block 요소와 무관하게\n모든 요소에 대해서 width 값의 maximum을 설정한다. inline요소와 block요소에 따른 차이점은\nblock 요소는 기본적으로 가로를 모두 채우고있기 때문에 width에 여백이 생긴 경우라면 남은 여백을 margin으로 채우는 특징이 있다.","html":"<h1 id=\"today-i-learned\" style=\"position:relative;\"><a href=\"#today-i-learned\" aria-label=\"today i learned permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Today I learned</h1>\n<p>오늘은 max-width 속성에 대해 알아보았다.\nmax-width 속성은 inline, block 요소와 무관하게\n모든 요소에 대해서 width 값의 maximum을 설정한다.</p>\n<p>inline요소와 block요소에 따른 차이점은\nblock 요소는 기본적으로 가로를 모두 채우고있기 때문에 width에 여백이 생긴 경우라면 남은 여백을 margin으로 채우는 특징이 있다.</p>\n<span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 908px; \">\n      <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 59.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABsUlEQVQoz4WSXW/TMBSG/Zv5C9wxCWm72e64YB3TdgFcIL4K2hBdoShp0411ohlDTcvaJm1iJ7F9bJ8Mp6F8BBBHj2Tp6Lz2e16ZsChhYSQFAJgCi5t/FyKmjMk04znnohQQBYrOFiCU1lgU/xFzmgjGaJpKACkluVgYZ7jsjfLTqbqIzBqsMQjRj5GNJ8tPw+VoFM3nLGWkN9X9mXEC3hpG3WvZD7E/N7ZTw5ua88jQr9fM95Orq+lkYp0TIYEmNGbJkrI4zXIurH+7+58YRAWguOACtEGjDcnjDLg0xiiF2va0jQ3/svEqDqCzufuAfTxgZ/vZsEmqjOyt2piSslQNe3WlLpKx9/bOw6PtV+2t8KxBqhgFpSpLQHI7sXL4GzbbSmzi4HN7o93adFobkXe/FNvu5aDbPWkGzpPM3ePeoT5/tOaxOj0UgVuNGcFg7Kigo4IPMBt8t914c3lr33/2/Gn84vbi9V3o7MD77ZLOjjzZ5P5xKcb6RyDV4bjuy+PWqNfE/i54e9DbXdOQzr38y7uf4gJ/QKogUdIbHup8IbJE2uXzX8hiENlqrKi9/A01YJ4GiJ36aQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class=\"gatsby-resp-image-image\" alt=\"max width\" title=\"max width\" src=\"/static/ea08d19d4b32e57d80f3dd14a0b8c9b9/a2b88/max-width.png\" srcset=\"/static/ea08d19d4b32e57d80f3dd14a0b8c9b9/5a46d/max-width.png 300w,\n/static/ea08d19d4b32e57d80f3dd14a0b8c9b9/0a47e/max-width.png 600w,\n/static/ea08d19d4b32e57d80f3dd14a0b8c9b9/a2b88/max-width.png 908w\" sizes=\"(max-width: 908px) 100vw, 908px\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\" loading=\"lazy\">\n    </span>","frontmatter":{"title":"TIL210406","date":"April 06, 2021"}}},"pageContext":{"slug":"/html/til210406/","previous":{"fields":{"slug":"/Data Structure/binary-search-tree/"},"frontmatter":{"title":"Binary Search Tree","category":"Data Structure","draft":false}},"next":{"fields":{"slug":"/Problem Solving/burglary/"},"frontmatter":{"title":"burglary","category":"Problem Solving","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}